/* Main Styler by Dharla Ferdana */
* {
  margin:0px 0px;
  padding:0px 0px;
}

@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:normal;
  src:local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}

html {
  overflow-y:scroll;
}

*:focus {
  outline:none;
}

body {
  background-color:#2f2f2f;
  text-align:center;
  line-height:1.5em;
  font:small 'Ubuntu','Trebuchet MS',Verdana,Arial,Sans-serif;
  color:#333;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Komentar */
#comments {
  padding:20px 30px 30px;
  margin:70px auto 120px;
  color:white;
  text-align:left;
}

/* Manipulation + CSS Fallback */
#comments .note {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  -webkit-box-shadow:0px 0px 0px 1px #555;
  -moz-box-shadow:0px 0px 0px 1px #555;
  box-shadow:0px 0px 0px 1px #555;
  color:#ccc;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  text-shadow:0px 1px 0px black;
}

#comments .note a,
#comments .note code {
  font-size:11px;
}

#comments img.incomment {
  display:block;
  margin:2px auto 0px;
}

#comments a,
#comments i[rel="anchor"] {
  color:#5687B8;
  font-style:normal;
}

#comments a.anchor {
  font-size:96%;
}

#comments pre,
#comments i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Courier,monospace !important;
  padding:0.5em 0.5em 0.5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  white-space:pre;
  word-wrap:normal !important;
}

#comments code,
#comments i[rel="code"] {
  color:white;
  font:normal 12px Monaco,'Courier New',Monospace;
}

#comments code a {
  color:white;
}

#comments code a:hover {
  background:transparent;
}

#comments blockquote,
#comments b[rel="quote"] {
  display:block;
  font-weight:normal;
  position:relative;
  background-color:#5D73B5;
  color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,0.2);
  margin:.75em 0;
  padding:15px 20px;
}

#comments blockquote a,
#comments blockquote a:visited {
  color:#FFEAE5!important;
}

#comments blockquote:before,
#comments b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  right:15px;
  border-color:transparent transparent #5D73B5;
  border-style:solid;
  border-width:7px;
}

#comments iframe {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:block;
  margin:10px auto 10px;
  border:4px solid #444;
}

.cm_wrap {
  clear:both;
  margin:0px auto 4px;
  width:700px;
  position:relative;
}

.cm_head {
  margin:0;
  width:58px;
  position:absolute;
  top:0px;
  left:0px;
}

.comments .avatar-image-container {
  margin:0px 0px 3px;
  vertical-align:middle;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px !important;
  height:45px !important;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
}

.comments .avatar-image-container .img {
  display:block;
  float:left;
  width:45px !important;
  height:45px !important;
  background:black url('http://lh5.googleusercontent.com/-HAZF9uHF1_w/AAAAAAAAAAI/AAAAAAAAAAA/aL3qXgDy-RA/s49-c/photo.jpg') no-repeat 50% 50%;
}

.comments .avatar-image-container .img:hover {
  opacity:0.7;
}

.cm_reply {}

.cm_reply a {
  display:block;
  width:auto;
  margin:0px 0px 1px -2px;
  text-decoration:none;
  padding:2px 7px 3px;
  text-transform:none;
  color:white !important;
  background-color:#527915;
  background-image:-webkit-linear-gradient(top,#64931C,#527915);
  background-image:-moz-linear-gradient(top,#64931C,#527915);
  background-image:-ms-linear-gradient(top,#64931C,#527915);
  background-image:-o-linear-gradient(top,#64931C,#527915);
  background-image:linear-gradient(top,#64931C,#527915);
  font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0px 2px 2px black;
  -moz-box-shadow:0px 2px 2px black;
  box-shadow:0px 2px 2px black;
  -webkit-border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  border-radius:3px 0px 0px 3px;
}

.cm_reply a:hover,
.cm_reply a:focus,
.cm_reply a.clicked {
  margin:0px 0px 1px -6px;
  padding:2px 10px 3px 7px;
}

.cm_reply a:focus,
.cm_reply a.clicked {
  background-color:#890586;
  background-image:-webkit-linear-gradient(top,#890586,#5F085D);
  background-image:-moz-linear-gradient(top,#890586,#5F085D);
  background-image:-ms-linear-gradient(top,#890586,#5F085D);
  background-image:-o-linear-gradient(top,#890586,#5F085D);
  background-image:linear-gradient(top,#890586,#5F085D);
}

.cm_reply a:active {
  background-image:-webkit-linear-gradient(bottom,#64931C,#527915);
  background-image:-moz-linear-gradient(bottom,#64931C,#527915);
  background-image:-ms-linear-gradient(bottom,#64931C,#527915);
  background-image:-o-linear-gradient(bottom,#64931C,#527915);
  background-image:linear-gradient(bottom,#64931C,#527915);
}

.cm_entry {
  margin-left:58px;
  padding:16px 16px 16px;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
  overflow:hidden;
  position:relative;
}

.cm_entry div.komentar-spam {
  padding:5px 10px 10px;
  margin:2px 0px 0px;
  clear:both;
  border:1px solid #555;
  background-color:#444;
  word-wrap:break-word;
  cursor:text;
  line-height:1.4em;
  min-height:20px;
}

.cm_info {
  border:1px solid #555;
  background-color:#444;
  padding:5px 10px;
  margin:0px 0px 2px;
}

.cm_name {
  font-weight:bold;
  text-decoration:none;
  float:left;
}

.cm_date {
  font-size:10px;
  color:#999;
  text-decoration:none;
  float:right;
}

a.tooltip {
  position: relative;
  text-decoration: none;
}

a.tooltip::before {
  position: absolute;
  content: attr(data-title);
  background: #000;
  width: 200px;
  padding: 5px 10px;
  color: #fff;
  top: -1000px;
  text-align: justify;
  z-index: 99;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  border: 5px solid #A52A2A;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-decoration: blink;
  visibility: hidden;
  font: normal 12px/20px Arial,sans-serif;
}

a.tooltip:hover::before {
  top: 100%;
  visibility: visible;
}

#editor {
  background-color:rgba(0,0,0,0.4);
  border-bottom:1px solid black;
  padding:10px 15px;
  height:30px;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  left:100px;
  z-index:999;
}

#editor a {
  color:white;
  text-decoration:none;
}

#editor ul,
#editor li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#editor-mode ul {
  background-color:#333;
  overflow:hidden;
}

#editor-mode li {
  float:left;
}

#editor-mode li a,
#editor-mode li .anc {
  display:block;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  padding:0px 20px;
  margin:0px 2px 0px 0px;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  border:1px solid #111;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:relative;
}

#editor li .anc input {
  border:1px solid #333;
  padding:2px 5px;
  display:inline;
  margin:0px 0px;
  font:bold 12px Arial,Sans-Serif;
}

#editor-mode li a:hover,
#editor-mode li a.active {
  text-decoration:none;
  background-color:#900;
}

#editor-mode li .anc .tooltip {
  cursor:pointer;
  background-color:#F7E794;
  border:1px solid #DE8C31;
  position:absolute;
  top:100%;
  right:-50px;
  left:0px;
  z-index:999;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  color:black;
  padding:10px;
  line-height:normal;
  text-align:left;
  margin-top:20px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:none;
}
#editor-mode li .anc .tooltip:before,
#editor-mode li .anc .tooltip:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-bottom-color:#DE8C31;
  position:absolute;
  top:-20px;
  left:20px;
}
#editor-mode li .anc .tooltip:after {
  border-bottom-color:#F7E794;
  border-width:8px;
  top:-16px;
  left:22px;
}
#editor-mode li .anc input:focus + .tooltip {
  display:none !important;
}

textarea#htmlsource {
  width:606px;
  display:block;
  margin:0px auto 0px;
  min-height:400px;
  border:1px solid #555;
  background-color:#111;
  font:normal 12px 'Courier New',Monospace;
  color:#aaa;
  cursor:text;
}

#tool {
  float:right;
}

#edit {
  width:100px;
  position:fixed !important;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  z-index:999;
  margin:0px 0px;
  padding:0px 0px;
  background-color:#222;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  border-top:20px solid #333;
  border-right:2px solid #333;
}
#edit li {list-style:none;margin:0px 0px;padding:0px 0px;}
#edit a {
  display:block;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  margin:0px 2px 0px 0px;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  border:1px solid #111;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

#edit a:hover {
  text-decoration:none;
  background-color:#900;
}

#edit a:active {
  background-color:#527915;
}

.clear {
  clear:both;
}

.hidden {
  display:none;
}